import React, { Component } from "react";
import socketClient from "socket.io-client";
import "whatwg-fetch";
import Snackbar from "@material-ui/core/Snackbar";
import Alert from "@material-ui/lab/Alert";

class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {
      counters: [],
      socket: null,
      open1: false,
      open2: false,
    };

    this.newCounter = this.newCounter.bind(this);
  }
  componentWillMount = () => {
    let socket = socketClient("localhost:8084");

    socket.on("refresh", (info) => {
      let flag = info === 'AQ=='?0:1
      this.handleClick(flag);
      this.getCounter();
      var audio = new Audio("assets/ding.mp3");
      audio.play();
    });

    this.setState({
      socket,
    });
  };
  componentDidMount() {
    this.getCounter();
  }
  getCounter() {
    fetch("/api/counters")
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          counters: json,
        });
      });
  }
  newCounter() {
    fetch("/api/counters/new", { method: "POST" })
      .then((res) => {
        console.log('res',res)
        res.json()
      })
      .then((json) => {
        this.state.socket.emit("new", { id: 1 });
        let data = this.state.counters;
        data.push(json);
        this.setState({
          counters: data,
        });
      });
  }
  handleClick = (flag) => {
    if(flag===0){
      this.setOpen1(true);

    }else{
      this.setOpen2(true);

    }
  };

  setOpen1 = (open) => {
    this.setState({
      open1:open,
    });
  };
  setOpen2 = (open) => {
    this.setState({
      open2:open
    });
  };
  handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }
    this.setOpen1(false);
    this.setOpen2(false);
  };


  render() {
    return (
      <>
        <div className="container">
          <div className="c_left">
            <p>
              Current Students: <code>{this.state.counters.length}</code>
            </p>
            <ul style={{ paddingInlineStart: 0 }}>
              {this.state.counters.map((counter, i) => (
                <img
                  key={i}
                  style={{ width: 60 }}
                  src="assets/img/people.png"
                ></img>
              ))}
            </ul>
          </div>
          <div className="c_right">
            <img width="100%" src="assets/img/room3.jpg" alt="" />
          </div>
         
          <Snackbar
            open={this.state.open2}
            autoHideDuration={1500}
            onClose={this.handleClose}
            anchorOrigin={{ vertical: "top", horizontal: "center" }}
          >
            <Alert onClose={this.handleClose} severity="warning">
              A student leaved!
            </Alert>
          </Snackbar>
          <Snackbar
            open={this.state.open1}
            autoHideDuration={1500}
            onClose={this.handleClose}
            anchorOrigin={{ vertical: "top", horizontal: "center" }}
          >
            <Alert onClose={this.handleClose} severity="info">
              A student joined!
            </Alert>
          </Snackbar>

          {/* <button onClick={this.newCounter}>New Student</button> */}
        </div>
      </>
    );
  }
}

export default Home;
